<template>
	<view class="searchPage-container">
		<!-- 搜索框区域 -->
		<view class="search-input-box">
			<view class="input-box">
				<image src="@/static/common/search-icon.png" class="searchIcon"></image>
				<input
					v-model.trim="searchGoodsKey"
					type="text"
					@confirm="toSearchGoodsList"
					class="searchInput"
					placeholder="请搜索商品标题"
					placeholder-style="color: #BFBFBF;font-size: 14px"
				/>
				<view @click="toSearchGoodsList" class="searchBtn">搜索</view>
			</view>
		</view>

		<!-- 搜索历史区域 -->
		<view v-if="searchHistoryList.length" class="search-history-box">
			<view class="search-history-title">
				<view class="title-text">搜索历史</view>
				<image @click="switchHistoryDialogShow" src="@/static/common/delete-icon.png" class="deleteIcon"></image>
			</view>
			<view class="search-history-list" :style="{ overflow: isFold ? 'hidden' : 'visible', 'max-height': isFold ? '72px' : '' }">
				<view @click="toGoodsList(item)" v-for="(item, index) in searchHistoryList" :key="index" class="search-history-list-item">{{ utils.middleEllipsis(item) }}</view>
				<view v-if="isFold && showIsfold" @click="isFoldClick" class="fold"></view>
				<view v-if="!isFold && showIsfold" @click="isFoldClick" class="expand"></view>
			</view>
		</view>

		<!-- 搜索发现区域 -->
		<view v-if="hotKeywordsList.length" class="searchFind-box">
			<view class="searchFind-box-title">
				<view class="title-text">搜索发现</view>
			</view>
			<view class="searchFind-box-content">
				<view @click="toGoodsList(item)" v-for="(item, index) in hotKeywordsList" :key="index" class="searchFind-box-content-item">{{ item }}</view>
			</view>
		</view>

		<!-- 热搜swiper区域 -->
		<scroll-view :scroll-x="true" :show-scrollbar="false" class="hotSearchSwiper">
			<view class="about-item-list">
				<view v-for="(item, index) in RankList" :key="index" class="about-item-list-item" :style="{ 'min-width': '270px' }">
					<!-- 全网热搜 -->
					<view v-if="item.type == 1" class="hotSearchList">
						<view class="about-item-title">
							<image src="@/static/common/fire-icon.png" class="about-item-title-icon"></image>
							<text class="about-item-title-text">全网热搜</text>
						</view>
						<view @click="toGoodsList(subItem.title)" v-for="(subItem, subIndex) in item.items" :key="subIndex" class="hotSearch-item-content">
							<text
								class="about-item-content-index"
								:class="{
									'about-item-content-index-1': subIndex + 1 == 1,
									'about-item-content-index-2': subIndex + 1 == 2,
									'about-item-content-index-3': subIndex + 1 == 3
								}"
							>
								{{ subIndex + 1 }}
							</text>
							<text class="about-item-content-text">{{ subItem.title }}</text>
						</view>
					</view>
					<!-- 热门活动 -->
					<view v-if="item.type == 2" class="hotActivityList">
						<view class="about-item-title">
							<image src="@/static/common/fire-icon.png" class="about-item-title-icon"></image>
							<text class="about-item-title-text">热门活动</text>
						</view>
						<view @click="toHotActive(subItem)" v-for="(subItem, subIndex) in item.items" :key="subIndex" class="hotActivity-item-content">
							<view
								class="about-item-content-index"
								:class="{
									'about-item-content-index-1': subIndex + 1 == 1,
									'about-item-content-index-2': subIndex + 1 == 2,
									'about-item-content-index-3': subIndex + 1 == 3
								}"
							>
								{{ subIndex + 1 }}
							</view>
							<image :src="subItem.imgUrl" class="hotActivity-item-content-pic"></image>
							<view class="hotActivity-item-content-info">
								<view class="hotActivity-item-content-info-title">{{ subItem.title }}</view>
								<view class="hotActivity-item-content-info-text">{{ subItem.subTile }}</view>
							</view>
						</view>
					</view>
					<!-- 热门活动 -->
					<view v-if="item.type == 3" class="hotGoodsList">
						<view class="about-item-title">
							<image src="@/static/common/shop-icon.png" class="about-item-title-icon"></image>
							<text class="about-item-title-text">热门商品</text>
							<view v-if="false" class="about-item-title-more">更多</view>
						</view>
						<view @click="toGoodsDeatil(subItem)" v-for="(subItem, subIndex) in item.selectedGoods" :key="subIndex" class="hotGoodsList-item-content">
							<view class="hotGoodsList-item-content-pic-box">
								<view
									class="hotGoodsList-item-content-pic-index"
									:class="{
										'hotGoodsList-item-content-pic-index-1': subIndex + 1 == 1,
										'hotGoodsList-item-content-pic-index-2': subIndex + 1 == 2,
										'hotGoodsList-item-content-pic-index-3': subIndex + 1 == 3
									}"
								>
									{{ subIndex + 1 }}
								</view>
								<image :src="subItem.coverUrl" class="hotGoodsList-item-content-pic"></image>
							</view>

							<view class="hotGoodsList-item-content-info">
								<view class="hotGoodsList-item-content-info-title">{{ subItem.goodsName }}</view>
								<view class="hotGoodsList-item-content-info-box">
									<view class="hotGoodsList-item-content-info-flag">{{ subItem.discountTag }}</view>
									<view class="hotGoodsList-item-content-info-couponBox">
										<text class="hotGoodsList-item-content-info-couponBox-text">券后¥</text>
										<text class="hotGoodsList-item-content-info-couponBox-price">{{ subItem.offerPrice }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<!-- 删除历史记录弹窗 -->
	<commonDialog
		:dialogShow="historyDialogShow"
		@confirmSDialog="confirmHistorySDialog"
		@closeSDialog="switchHistoryDialogShow"
		dialogTitle="温馨提示"
		dialogContent="是否确认清空搜索历史？"
	/>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import commonDialog from '@/components/common-dialog/index.vue';
import utils from '@/utils/common.js';
import { getHotKeywords, getRankList } from '@/api/home.js';
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

// 获取搜索历史记录的高度，判断是否需要折叠
const searchHistoryBoxHeight = ref(0);
const isFold = ref(false);
const showIsfold = ref(true);

// 计算搜索历史高度
const getSearchHistoryHeight = () => {
	setTimeout(() => {
		uni.$u.getRect('.search-history-list').then((res) => {
			searchHistoryBoxHeight.value = res.height;
			console.log('搜索历史记录的高度为：', searchHistoryBoxHeight.value);
			fold();
		});
	}, 0);
};
nextTick(() => {
	getSearchHistoryHeight();
});

// 判断是否需要折叠
const fold = () => {
	// 只显示两行历史记录，一行的高度为24 + 12
	if (searchHistoryBoxHeight.value >= 72) {
		showIsfold.value = true;
		isFold.value = true;
	} else {
		showIsfold.value = false;
		isFold.value = false;
	}
	console.log('是否折叠：', isFold.value, searchHistoryBoxHeight.value);
};

// 切换搜索历史记录折叠
const isFoldClick = () => {
	isFold.value = !isFold.value;
	console.log('是否折叠：', isFold.value);
};

// 切换清空历史记录弹窗
const historyDialogShow = ref(false);
const switchHistoryDialogShow = () => {
	historyDialogShow.value = !historyDialogShow.value;
};

// 清空搜索历史记录
const confirmHistorySDialog = () => {
	searchHistoryList.value = [];
	uni.setStorageSync('searchHistoryList', []);
	getSearchHistoryHeight();
	switchHistoryDialogShow();
};

// 搜索商品
const searchHistoryList = ref([]);
const searchGoodsKey = ref('');
const toSearchGoodsList = () => {
	if (!searchGoodsKey.value) {
		uni.showToast({
			title: '请输入搜索关键词',
			icon: 'none'
		});
		return;
	}

	if (searchHistoryList.value.length > 15) {
		searchHistoryList.value.shift();
	}
	searchHistoryList.value.push(searchGoodsKey.value);

	// 搜索历史列表去重
	let set = new Set(searchHistoryList.value);
	searchHistoryList.value = Array.from(set);
	searchHistoryList.value = searchHistoryList.value.reverse();

	uni.setStorageSync('searchHistoryList', searchHistoryList.value);
	getSearchHistoryHeight();

	uni.navigateTo({
		url: '/subPages/searchGoodsList/index?goodsKeywords=' + searchGoodsKey.value
	});
};

// 获取热门关键词
const hotKeywordsList = ref([]);
const getHotKeywordsFun = async () => {
	let res = await getHotKeywords();
	if (res.code == 0) {
		hotKeywordsList.value = res.data;
	}
};

// 获取榜单列表
const RankList = ref([]);
const getRankListFun = async () => {
	let res = await getRankList();
	if (res.code == 0) {
		RankList.value = res.data;
	}
};

// 点击搜索热词跳转
const toGoodsList = (item) => {
	uni.navigateTo({
		url: '/subPages/searchGoodsList/index?goodsKeywords=' + item
	});
};

// 点击热门活动跳转
const toHotActive = (item) => {
	isLogin();
	uni.navigateTo({
		url: `/subPages/subWebView/index?url=${encodeURIComponent(item.linkUrl)}`
	});
};

// 点击热门商品跳转
const toGoodsDeatil = (item) => {
	uni.navigateTo({
		url: `/subPages/goodsDetail/index?goodsId=${item.goodsId}&platform=${item.platform}`
	})
};

// 判断登录
const isLogin = () => {
	if (!userStore.access_token) {
		uni.navigateTo({
			url: '/subPages/login/index'
		})
		
		throw new Error('去登录！！！')
	};
}

onMounted(() => {
	getHotKeywordsFun();
	getRankListFun();
});

onShow(() => {
	searchHistoryList.value = uni.getStorageSync('searchHistoryList') || [];
});
</script>

<style lang="scss">
.searchPage-container {
	padding: 0 12px 12px;

	.search-input-box {
		position: sticky;
		top: 0;
		transform: translateX(-12px);
		left: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		padding: 12px;
		margin-bottom: 12px;
		background-color: #fff;
		z-index: 99;

		.input-box {
			flex: 1;
			display: flex;
			align-items: center;
			height: 40px;
			padding: 13px 0 13px 14px;
			border-radius: 32px;
			background-color: #f9f9f9;

			.searchIcon {
				min-width: 12.38px;
				min-height: 13.87px;
				max-width: 12.38px;
				max-height: 13.87px;
				margin-right: 9px;
			}

			.searchInput {
				flex: 1;
				font-size: 14px;
			}

			.searchBtn {
				color: #ff0309;
				width: 64px;
				font-size: 14px;
				font-weight: 500;
				line-height: 16px;
				text-align: center;
				margin-left: 10px;
				border-left: 1px solid rgba(255, 61, 59, 0.2);
			}
		}
	}

	.search-history-box {
		margin-bottom: 12px;

		.search-history-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;

			.title-text {
				font-size: 16px;
				font-weight: 500;
				line-height: 22.4px;
			}

			.deleteIcon {
				width: 16px;
				height: 16px;
			}
		}

		.search-history-list {
			position: relative;
			padding-right: calc(30px + 12px);
			border-bottom: 1px solid #e1e1e1;
			margin-bottom: 12px;

			.search-history-list-item {
				display: inline-block;
				padding: 0px 12px;
				border-radius: 23px;
				color: #666;
				height: 24px;
				line-height: 24px;
				font-size: 12px;
				font-weight: 400;
				margin: 0 12px 12px 0;
				background-color: #f4f4f4;
			}

			.fold,
			.expand {
				position: absolute;
				right: 12px;
				bottom: 12px;
				width: 30px;
				height: 24px;
				border-radius: 23px;
				background-color: #f4f4f4;

				&::after {
					content: '';
					position: absolute;
					position: absolute;
					right: 50%;
					top: 50%;
					transform-origin: center center;
					width: 8px;
					height: 8px;
					border-top: 1px solid #666;
					border-right: 1px solid #666;
				}
			}

			.fold {
				&::after {
					transform: translate(50%, -80%) rotate(135deg);
				}
			}

			.expand {
				&::after {
					transform: translate(50%, -20%) rotate(-45deg);
				}
			}
		}
	}

	.searchFind-box {
		margin-bottom: 20px;

		.searchFind-box-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;

			.title-text {
				font-size: 16px;
				font-weight: 500;
				line-height: 22.4px;
			}
		}

		.searchFind-box-content {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
			margin-bottom: 12px;

			.searchFind-box-content-item {
				font-weight: 400;
				font-size: 14px;
				line-height: 19.6px;
			}
		}
	}

	.hotSearchSwiper {
		width: 100%;
		white-space: nowrap;
		
		// 隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
		}

		.about-item-list {
			display: flex;
			align-items: baseline;
			gap: 12px;
			width: 100%;
			
			// 隐藏滚动条
			&::-webkit-scrollbar {
				display: none;
			}

			.about-item-list-item {
				width: 100%;
				border-radius: 12px;
				border: 1px solid #ffe1e3;
				overflow: hidden;

				.about-item-title {
					position: relative;
					display: flex;
					align-items: center;
					height: 44px;
					padding: 0px 12px;
					border-radius: 12px;
					background: linear-gradient(180deg, rgba(255, 240, 241, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);

					.about-item-title-icon {
						width: 16px;
						height: 16px;
						margin-right: 12px;
					}

					.about-item-title-text {
						color: #ff0309;
						font-size: 16px;
						font-weight: 500;
						line-height: 20px;
					}

					.about-item-title-more {
						position: absolute;
						top: 50%;
						right: 22px;
						transform: translateY(-50%);
						font-size: 12px;
						font-weight: 400;
						line-height: 20px;

						&::after {
							content: '';
							position: absolute;
							right: -6px;
							top: 50%;
							width: 5px;
							height: 5px;
							border-top: 1px solid #666;
							border-right: 1px solid #666;
							transform-origin: center center;
							transform: translateY(-50%) rotate(45deg);
							margin-left: 4px;
						}
					}
				}

				.about-item-content-index {
					color: #999;
					font-style: italic;
					font-size: 16px;
					font-weight: 900;
					line-height: 16px;
					margin-right: 22px;
				}

				.about-item-content-index-1 {
					color: #ff0309;
				}

				.about-item-content-index-2 {
					color: #ff6c2a;
				}

				.about-item-content-index-3 {
					color: #ffdd99;
				}

				.hotSearch-item-content {
					display: flex;
					align-items: center;
					height: 44px;
					padding: 0 20px;

					.about-item-content-text {
						color: #333;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
					}
				}

				.hotActivity-item-content {
					display: flex;
					align-items: center;
					padding: 12px 20px 0;

					&:last-child {
						padding-bottom: 12px;
					}

					.hotActivity-item-content-pic {
						width: 56px;
						height: 56px;
						border-radius: 8px;
						// background-color: #666;
						margin-right: 12px;
					}

					.hotActivity-item-content-info {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 6px;

						.hotActivity-item-content-info-title {
							color: #333;
							font-size: 14px;
							font-weight: 500;
							line-height: 20px;
						}

						.hotActivity-item-content-info-text {
							color: #ff0309;
							font-size: 10px;
							font-weight: 400;
							line-height: 14px;
							padding: 0 4px;
							border-radius: 3px;
							background-color: rgba(255, 3, 9, 0.1);
						}
					}
				}

				.hotGoodsList-item-content {
					display: flex;
					align-items: center;
					padding: 12px 20px 0;

					&:last-child {
						padding-bottom: 12px;
					}

					.hotGoodsList-item-content-pic-box {
						flex: 1;
						position: relative;
						border-radius: 8px;
						min-width: 56px;
						min-height: 56px;
						max-width: 56px;
						max-height: 56px;
						overflow: hidden;
						margin-right: 12px;

						.hotGoodsList-item-content-pic {
							min-width: 56px;
							min-height: 56px;
							max-width: 56px;
							max-height: 56px;
							border-radius: 8px;
							background-color: #333;
						}

						.hotGoodsList-item-content-pic-index {
							position: absolute;
							color: #fff;
							font-size: 10px;
							padding: 1px 3px;
							line-height: 12px;
							border-radius: 8px 0 8px 0;
							background-color: #999;
							z-index: 88;
						}

						.hotGoodsList-item-content-pic-index-1 {
							background-color: #ff0309;
						}

						.hotGoodsList-item-content-pic-index-2 {
							background-color: #ff6c2a;
						}

						.hotGoodsList-item-content-pic-index-3 {
							background-color: #ffdd99;
						}
					}

					.hotGoodsList-item-content-info {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 6px;
						overflow: hidden;

						.hotGoodsList-item-content-info-title {
							width: 100%;
							font-size: 14px;
							font-weight: 500;
							line-height: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.hotGoodsList-item-content-info-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;

							.hotGoodsList-item-content-info-flag {
								color: #ff0309;
								font-size: 10px;
								font-weight: 400;
								line-height: 14px;
								padding: 0 3px;
								border-radius: 3px;
								border: 1px solid #ff0309;
							}

							.hotGoodsList-item-content-info-couponBox {
								color: #ff0309;

								.hotGoodsList-item-content-info-couponBox-text {
									font-size: 10px;
									font-weight: 400;
									line-height: 14px;
								}

								.hotGoodsList-item-content-info-couponBox-price {
									font-size: 14px;
									font-weight: 600;
									line-height: 14px;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
